<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/style/less/lib/swiper.min.css">
    <link rel="stylesheet" href="../dist/style/css/base.css">
    <script>
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    </script>
</head>

<body>

</body>
<div class="warp">
    <!--header-->
    <!--<header class="hd">
        <a href="#123" class="r-icon only-icon">
            <i class="iconfont icon-fenxiang"></i>            
                  </a>
        <a href="#123" class="l-icon only-icon">
            <i class="iconfont icon-left1"></i>                 
        </a>
        <div class="tab-top">
            <ul>
                <li><a href="#123" class="active">商品</a></li>
                <li><a href="#123">详情</a></li>
                <li><a href="#123">参数</a></li>
            </ul>
        </div>
    </header>-->

    <!--banner-->
    <div class="ban">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#123">
                            <img src="../dist/images/pro_2.jpg" alt="">
                        </a>
                </div>
                <div class="swiper-slide">
                    <a href="#123">
                            <img src="../dist/images/pro_2.jpg" alt="">
                        </a>
                </div>
                <div class="swiper-slide">
                    <a href="#123">
                            <img src="../dist/images/pro_2.jpg" alt="">
                        </a>
                </div>
                <div class="swiper-slide">
                    <a href="#123">
                            <img src="../dist/images/pro_2.jpg" alt="">
                        </a>
                </div>
                <div class="swiper-slide">
                    <a href="#123">
                            <img src="../dist/images/pro_2.jpg" alt="">
                        </a>
                </div>
                <div class="swiper-slide">
                    <a href="#123">
                            <img src="../dist/images/pro_2.jpg" alt="">
                        </a>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>


    </div>

    <div class="prod-detail-tit">
        <p class="tit">
            血糖仪
        </p>
        <p class="ms-tit">
            每分钟脉搏/智能语音播报
        </p>
        <p class="price">
            <span class="address">广东深圳</span>
            <span>¥</span>399 <span class="free_shipping">包邮</span>
        </p>
    </div>

    <p class="return_msg">
        <i class="iconfont icon-lingchengben"></i>该商品享受购买6个月后全额返还
    </p>

    <p class="guarantee-bar">
        <span><i class="iconfont icon-ok"></i>零元购</span>
        <span><i class="iconfont icon-ok"></i>正品保障</span>
        <span><i class="iconfont icon-ok"></i>总部发货</span>
    </p>

    <div class="line-box"></div>

    <div class="sel-sku">
        <a href="#123">
            请选择颜色分类 <i class="iconfont icon-left"></i>
        </a>
    </div>

    <div class="sel-sku-box">
        <div class="b-box-1">
            <div class="l">
                <img src="../dist/images/pro_2.jpg" alt="">
            </div>
            <div class="r">
                <p class="price">总价: <span>¥</span><span class="price_txt">399</span> </p>
                <p class="sku-msg">已选：<span>”黄色“</span> <span>”1件”</span></p>
            </div>
        </div>
        <div class="b-box-2">
            <p class="tit">
                颜色分类
            </p>
            <ul>
                <li class="active">黄色</li>
                <li>蓝色</li>
            </ul>
        </div>
        <div class="b-box-3">
            <ul class="num-js">
                <li class="add">-</li>
                <li class="val"><input type="text" value="1"></li>
                <li class="sub">+</li>
            </ul>
            <span class="tit">购买数量</span>

        </div>

        <div class="pd-box"></div>
        <div class="shop-ft-bar-2">
            <a href="#123" class="box-1">
            <i class="iconfont icon-icon"></i>
                购物车
                <span class="num">1</span>
            </a>
            <a href="#123" class="box-2">
                加入购物车
            </a>

            <a href="#123" class="box-3">
                立即购买
        </a>
        </div>
    </div>

    <div class="line-box"></div>

    <div class="tab-tit">
        <ul>
            <li>
                <a href="#13" class="active" data-val="0">
                    <span>商品详情
                        </span>
                    </a>
            </li>
            <li>
                <a href="#13" data-val="1"><span>商品参数</span></a>
            </li>
        </ul>
    </div>

    <div class="tab-cont">
        <div class="detail-box active item">
            sdafsdf
            <img src="../dist/images/pro_2.jpg" alt="">
        </div>
        <div class="parameter-box item">
            <img src="../dist/images/pro_2.jpg" alt=""> 222
        </div>
    </div>




    <div class="pd-box">
    </div>
    <div class="shop-ft-bar">
        <a href="#123" class="box-1">
            <i class="iconfont icon-icon"></i>
                购物车
                <span class="num">1</span>
            </a>
        <a href="#123" class="box-2">
                加入购物车
            </a>

        <a href="#123" class="box-3">
                立即购买
        </a>
    </div>

    <a class="reutn-btn" href="#123">
             <i class="iconfont icon-left1"></i>  
        </a>
</div>
<div class="maksbox">

</div>


<script src="../dist/js/base.js"></script>
<script src="../dist/js/lib/swiper.jquery.min.js"></script>

<script>
        // 矫正rem
        function correctrem() {
            var rem_full_width = $("<div id='rem-test' style='width:7.5rem'></div>").appendTo($('body')).width();
            var device_width = Math.min(document.documentElement.clientWidth, 640);
            if (rem_full_width !== device_width) {
                document.documentElement.style.fontSize = (device_width / 7.5) * (device_width / rem_full_width) + 'px';
            }
            $('#rem-test').remove();
        }
        correctrem();
        $(function () {
            var swiperSlide = $('.swiper-container').find('.swiper-slide');
            if (swiperSlide.length > 2) {
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable: true
                });
            }
            $(".tab-tit a").hammer().bind("tap", function (ev) {
                // var tagName = ev.target.tagName && ev.target.tagName.toLocaleLowerCase()
                var $this = $(this), index = 0;
                if (!$this.hasClass("active")) {
                    $this.parents(".tab-tit").find("a").removeClass("active");
                    $this.addClass("active");
                    index = $this.data("val");
                    $(".tab-cont").find(".item").removeClass("active").eq(index).addClass("active")

                }
            });

            $(".sel-sku").hammer().bind("tap", function (ev) {
                $(".maksbox").addClass("active");
                $(".sel-sku-box").addClass("active");

            })
            $(".maksbox").hammer().bind("tap", function (ev) {
                $(".sel-sku-box").removeClass("active");
                var $this = $(this)
                setTimeout(function () {
                    $this.removeClass("active");

                }, 200)
            })
        })

</script>

</body>

</html>